<template>
  <view class="information">
    <view class="optionList">
      <view class="optionItem">
        <view class="optionTitle">
          <text>营业执照照片</text>
          <tip
            content="请上传彩色照片or彩色扫描件or加盖公章鲜章的复印件、可添加“微信支付”相关水印（如微信支付认证）"
          ></tip>
        </view>
        <view
          class="addPic"
          @click="addPic"
          v-if="!mini_apply_info.license_pic"
        >
          <text class="iconfont icon-camera"></text>
          <text>上传图片</text>
        </view>
        <view class="addPic" @click="addPic" v-else>
          <image :src="mini_apply_info.license_pic"></image>
        </view>
      </view>
      <view class="optionItem">
        <view class="optionTitle">
          <text>公司名称</text>
          <tip
            content="需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致，信息审核成功后，企业名称不可修改。"
          ></tip>
        </view>
        <input
          type="text"
          placeholder="请输入公司名称"
          v-model="mini_apply_info.license_name"
          :disabled="status == 3"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">企业代码类型</text>
        <myPicker
          v-model="mini_apply_info.code_type"
          placeholoder="请选择企业代码类型"
          :options="codeTypeList"
          rangeKey="name"
          rangeValue="value"
          :disabled="status == 3"
        ></myPicker>
      </view>
      <view class="optionItem">
        <view class="optionTitle">
          <text>企业代码</text>
          <tip
            content="需国家统一规定的企业（单位）法人代码。代码由8位无属性的数字和一位校验码。"
          ></tip>
        </view>
        <input
          type="text"
          placeholder="请输入企业代码"
          v-model="mini_apply_info.license_no"
          :disabled="status == 3"
        />
      </view>
      <view class="optionItem">
        <view class="optionTitle">
          <text>法人微信账号</text>
          <tip
            content="作为登录账号，请填写未被微信公众平台注册，未被微信开放平台注册的微信号"
          ></tip>
        </view>
        <input
          type="text"
          placeholder="请输入法人微信账号"
          v-model="mini_apply_info.legal_persona_account"
          :disabled="status == 3"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">法人姓名</text>
        <input
          type="text"
          placeholder="请输入法人姓名"
          :disabled="status == 3"
          v-model="mini_apply_info.legal_persona_name"
        />
      </view>
    </view>
    <view class="footer">
      <u-button
        @click="submit"
        :custom-style="{ width: '600rpx', height: '80rpx' }"
        type="error"
        shape="circle"
        :disabled="status == 3"
        >{{ status == 3 ? "审核中" : "提交审核" }}</u-button
      >
    </view>
  </view>
</template>

<script>
import myPicker from "./myPicker.vue";
import http from "@/common/http.js";
export default {
  components: {
    myPicker
  },
  props: {
    bind_store_id: {
      type: [String, Number],
      default: ""
    },
    status: {
      type: [String, Number],
      default: ""
    },
    info: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      // 企业代码类型
      codeTypeList: [
        {
          name: "统一社会信用代码（18位）",
          value: "1"
        },
        {
          name: "组织架构代码（9位xxxxxxxxxx-x）",
          value: "2"
        },
        {
          name: "营业执照注册号（15位）",
          value: "3"
        }
      ],
      // 表单信息
      mini_apply_info: {
        license_name: "",
        license_no: "",
        code_type: "1",
        legal_persona_account: "",
        legal_persona_name: "",
        license_pic: ""
      }
    };
  },
  computed: {},
  methods: {
    // 点击选择图片
    addPic() {
      if (this.status == 3) return;

      this.$utils.uploadImage(1, (res) => {
        this.mini_apply_info.license_pic = res;
        this.analysis(res);
      });
    },

    // 解析图片
    async analysis(url) {
      const res = await this.$allrequest.merchant.analysis(
        { url, type: 1 },
        true
      );
      if (res.code == -1) {
        return;
      }
      if (res.code == 0) {
        this.mini_apply_info.license_no = res.data.reg_num;
        this.mini_apply_info.license_name = res.data.name;
        this.mini_apply_info.legal_persona_name = res.data.person;
      }
    },
    // 点击提交审核
    async submit() {
      if (!this.mini_apply_info.license_pic) {
        uni.showToast({
          title: "请上传营业执照照片",
          icon: "none"
        });
        return;
      }
      if (!this.mini_apply_info.license_name) {
        uni.showToast({
          title: "请输入公司名称",
          icon: "none"
        });
        return;
      }
      if (!this.mini_apply_info.code_type) {
        uni.showToast({
          title: "请选择代码类型",
          icon: "none"
        });
        return;
      }
      if (!this.mini_apply_info.license_no) {
        uni.showToast({
          title: "请填写企业代码",
          icon: "none"
        });
        return;
      }
      if (!this.mini_apply_info.legal_persona_account) {
        uni.showToast({
          title: "请输入法人微信账号",
          icon: "none"
        });
        return;
      }
      if (!this.mini_apply_info.legal_persona_name) {
        uni.showToast({
          title: "请输入法人姓名",
          icon: "none"
        });
        return;
      }
      let param = {
        bind_store_id: this.bind_store_id,
        mini_apply_info: JSON.stringify(this.mini_apply_info)
      };
      const res = await this.$allrequest.merchant.applyMini(param, true);
      if (res.code == 0) {
        this.$emit("submit");
      }
    }
  },
  created() {
    if (this.info) {
      this.mini_apply_info = this.info;
    }
  }
};
</script>

<style lang="scss" scoped>
.information {
  .optionList {
    padding-left: 24rpx;
    background-color: #fff;
    .optionItem {
      padding-top: 30rpx;
      padding-bottom: 30rpx;
      border-bottom: 1px solid #f8f8f8;
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      padding-right: 30rpx;
      .optionTitle {
        margin-bottom: 24rpx;
      }
      .optionChoose {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      .chooseType {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #8c8c8c;
        font-size: 24rpx;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      input {
        width: 100%;
      }
      .tip {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 24rpx;
        display: flex;
        flex-direction: column;
      }
      .sceneList {
        display: flex;
        flex-wrap: wrap;
        text {
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 24rpx;
          background-color: #f2f2f2;
          border-radius: 30rpx;
          font-size: 24rpx;
          color: #8c8c8c;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
          font-weight: 600;
        }
        .current {
          border: 1px solid #f60313;
          background-color: #fbeceb;
          color: #f0250e;
        }
      }
      .addPic {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 24rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 56rpx;
          margin-bottom: 12rpx;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .optionItem:last-child {
      border-bottom: none;
    }
  }
  .footer {
    display: flex;
    padding-top: 10rpx;
    justify-content: center;
    border-top: 1px solid #f8f8f8;
    padding-bottom: 10rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
    .btn {
      width: 80%;
      height: 80rpx;
      border-radius: 999px;
      background-color: #f0250e;
      color: #fff;
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
